<template>
  <el-dialog title="题目预览" :visible="isShowDept" :data="toList" @close="handleClose">
    <el-row>
      <el-col :span="6">
        【题型】:
        {{formatCatalogID()}}
      </el-col>
      <el-col :span="6">
        【编号】:{{toList.id}}
      </el-col>
      <el-col :span="6">
        【难度】:
        {{formatDifficulty()}}
      </el-col>
      <el-col :span='6'>
        【标签】:{{toList.remarks}}
      </el-col>
    </el-row>
    <el-row style="margin:20px 0">
      <el-col :span="6">
        【学科】:{{toList.subjectName}}
      </el-col>
      <el-col :span="6">
        【目录】:{{toList.directoryName}}
      </el-col>
      <el-col :span="6">
        【方向】:{{toList.direction}}
      </el-col>
    </el-row>
    <hr>
    <el-row style="margin:20px 0">
      <el-col style="margin-bottom:10px">
        【题干】:
      </el-col>
      <div style="color:blue" v-html="toList.question">
        {{toList.question}}
      </div>
      <template>
        <div v-for="(item,index) in toList.options" :key="index" style="margin:10px 0">
          <el-radio v-if="toList.options.length===4" v-model="radio" :label="item.isRight">{{item.title}}</el-radio>
          <el-checkbox v-else-if="toList.options.length!==4&&item.isRight===1" checked>{{item.title}}</el-checkbox>
          <el-checkbox v-else-if="toList.options.length!==4&&item.isRight!==1">{{item.title}}</el-checkbox>
        </div>
      </template>
    </el-row>
    <hr>
    <el-row style=" margin:20px 0">
      <el-col>
        【参考答案】:
        <el-button type="danger" size="mini" @click="handleXs">视频答案预览</el-button>
        <div>
          <img v-if="!toList.videoURL" src="http://img.netbian.com/file/2022/0117/1130148RqIM.jpg" class="user-avatar">
          <!-- <img :src="toList.videoURL" alt=""> -->
          <!-- <video :src="toList.videoURL" style="margin-top:10px"></video> -->
          <video src="../../video.mp4" autoplay="" muted="muted" controls="" loop="" width="300" :style="{display:xs}"></video>
        </div>
      </el-col>
    </el-row>
    <hr>
    <el-row style="margin:20px 0">
      <el-col>
        【答案解析】:
        <i v-html="toList.answer" style="white-space:pre-wrap;"></i>
      </el-col>

    </el-row>
    <hr>
    <el-row style="margin:20px 0">
      <el-col>
        【题目备注】:{{toList.remarks}}
      </el-col>
    </el-row>
    <el-button @click="handleClose" slot="footer" class="dialog-footer" type="primary">关闭</el-button>
  </el-dialog>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'

export default {
  name: 'questionsPsreview',
  // replace: ,
  props: {
    // 控制添加部门弹窗标志位
    isShowDept: {
      type: Boolean,
      required: true
      // default: false
    },
    toList: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      xs: 'none',
      radio: 1,
      questionType,
      difficulty
    }
  },
  // created () {
  //   this.noSpan()
  // },
  methods: {
    handleXs () {
      this.xs = 'block'
    },
    noSpan () {
      // const str = this.toList.answer
      // const result = str.replace(/<.*?>/ig, '')
      // console.log(result)
      // return result
    },
    formatDifficulty () {
      const info = difficulty.find(item => parseInt(item.value) === Number(this.toList.difficulty))
      return info ? info.label : '其他'
    },
    formatCatalogID () {
      const info = questionType.find(item => parseInt(item.value) === Number(this.toList.catalogID))
      return info ? info.label : '其他'
    },
    // 控制弹出显示隐藏
    handleClose () {
      this.xs = 'none'
      this.$emit('update:isShowDept', false)
    }
  }
}
</script>

<style scoped lang='less'>
</style>
